/*
 * @Author: hy
 * @Date: 2018-05-02 09:52:10
 * @Last Modified by: hy
 * @Last Modified time: 2018-05-16 21:31:03b4038
 */

// 排列3提交页面

import React, { Component } from 'react'
import {
  WingBlank, WhiteSpace, Tabs, Modal, Toast, Checkbox, Flex, ActionSheet,
} from 'antd-mobile'
import NavBar from '@components/navbar'
import { withRouter } from 'react-router-dom'
import Button from '@components/button'

@withRouter
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 是否选中服务协议
      checkedAgreement: false,
      // 选中的玩法比率
      checkedData: [
        {
          name: '排列3  080期',
          exact: '1注2元',
          value: [1, 2, 3],
        },
        {
          name: '排列3  080期',
          exact: '1注2元',
          value: [6, 7, 8],
        },
      ],
    }
  }


  /**
   * 提交购彩
   */
  onSubmit=() => {
    console.log('提交购彩')
  }


  /**
   * 删除一项
   */
  onDeleteItem=(item) => {
    Modal.alert('提示', '确定删除该项吗?', [
      { text: '取消', onPress: () => console.log('cancel') },
      { text: '确定', onPress: () => console.log('ok') },
    ])
  }


  /**
   * 添加编辑赛事
   */
  onAddEdit=() => {
    console.log('添加编辑赛事')
    this.props.history.push('/jczq/choose')
  }

  /**
   * 显示服务协议
   */
  onShowAgreeText=(e) => {
    e.stopPropagation()
    e.preventDefault()
    console.log('服务协议')
  }

  /**
   * 减去倍投
   */
  onMinus=() => {

  }

  /**
   * 增加倍投
   */
  onAdd=() => {

  }


  render() {
    const {
      checkedData,
      checkedAgreement,
    } = this.state
    const title = '排列3'
    return (
      <div className="page-box">
        <NavBar
          left={<span className="app-icon icon-left" onClick={this.props.history.goBack} />}
          title={title}
          right={null}
        />
        <div className="page-content contain-footer contain-agreement">
          <div className="page-submit">
            <p className="top-tips">
            奖池滚存
              <span className="font-red">56.56亿</span>
              <span className="font-red">1198</span>
            倍掏空奖池
            </p>
            <div className="again-btns">
              <div className="btn-item">+自选1注</div>
              <div className="btn-item">+机选1注</div>
              <div className="btn-item">+机选5注</div>
            </div>
            <div className="paper-wrap">
              {
                checkedData.map((item, index) => {
                  const result = (
                    <div className="dlt-list-item " key={index.toString()}>
                      <p className="title-bar flex-row-base">
                        <p className="flex-row-base">
                          <img src="resource/image/paper-close.png" alt="删除" className="item-close" onClick={() => this.onDeleteItem(item)} />
                          <span>{item.name}</span>
                        </p>
                        <span>{item.exact}</span>
                      </p>
                      <div className="ball-list flex-row-center">
                        {
                          item.value.map((value, i) => {
                            const re = (
                              <span key={i.toString()} className="ball-item red checked">{value}</span>
                            )
                            return re
                          })
                        }
                      </div>

                    </div>
                  )
                  return result
                })
              }
              <img src="resource/image/paper-header.png" className="paper-header" alt="" />
              <img src="resource/image/paper-footer.png" className="paper-footer" alt="" />
            </div>
          </div>
          {/* 用户协议和倍数 */}
          <div className="page-submit-footer">
            <div className="flex-row-base agreement">
              <Checkbox.AgreeItem data-seed="logId" checked={checkedAgreement} onChange={(e) => { this.setState({ checkedAgreement: e.target.checked }) }}>
                  我已阅读并同意
                <a onClick={this.onShowAgreeText} className="font-yellow">《用户服务协议》</a>
              </Checkbox.AgreeItem>
            </div>
            <div className="method-row flex-row-base">
              <div />
              <div className="row-right flex-row-base">
                <span onClick={this.onMinus}>—</span>
                <span>倍投1</span>
                <span onClick={this.onAdd}>＋</span>
              </div>
            </div>
          </div>
        </div>

        <div className="page-footer">
          <div className="dlt-footer">
            <div className="right-content">
              <p>合计<span className="font-red">2</span>元&nbsp;&nbsp;<span>共1注</span></p>
              {/* <p>预计奖金：<span className="font-red">12100321.323</span>元</p> */}
            </div>
            <Button type="red" disabled={false} onClick={this.onSubmit}>提交购彩</Button>
          </div>
        </div>
      </div>
    )
  }
}
